<!DOCTYPE html>
<html lang="en"><head>
<title>HTML Templates</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="spec.css" type="text/css">
<link rel="stylesheet" href="prettify.css" type="text/css">
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-WD" type="text/css">
</head>

<body>

<div class="head">

<div class="logo">
    <a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C"></a>
</div>

<h1>HTML Templates</h1>
<h2 id="editors-draft">W3C Working Draft 28 March 2013</h2>
<dl>
<dt>This version</dt>
    <dd><a href="http://www.w3.org/TR/2013/WD-html-templates-20130328/">http://www.w3.org/TR/2013/WD-html-templates-20130328/</a></dd>
<dt>Latest version</dt>
    <dd><a href="http://www.w3.org/TR/html-templates/">http://www.w3.org/TR/html-templates/</a></dd>
<dt>Latest editor's draft</dt>
    <dd><a href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html">https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html</a></dd>
<dt>Previous version</dt>
    <dd>None</dd>
<dt>Revision history</dt>
    <dd><a href="https://dvcs.w3.org/hg/webcomponents/log/tip/spec/templates/index.html">https://dvcs.w3.org/hg/webcomponents/log/tip/spec/templates/index.html</a></dd>
<dt>Participate</dt>
    <dd>Discuss on <a href="http://lists.w3.org/Archives/Public/public-webapps/">public-webapps@w3.org</a> (<a href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a>)</dd>
    <dd><a href="https://www.w3.org/Bugs/Public/enter_bug.cgi?comment=&amp;blocked=15476&amp;short_desc=%5BTemplates%5D%3A%20&amp;product=WebAppsWG&amp;component=Component%20Model">File bugs</a> (w3.org's <a href="https://www.w3.org/Bugs/Public/">Bugzilla</a>)</dd>
<dt>Editors</dt>
    <dd class="vcard"><span class="fn">Dimitri Glazkov</span>, <span class="org">Google</span>, &lt;<a class="email" href="mailto:dglazkov@chromium.org">dglazkov@chromium.org</a>&gt;</dd>
    <dd class="vcard"><span class="fn">Rafael Weinstein</span>, <span class="org">Google</span>, &lt;<a class="email" href="mailto:rafaelw@chromium.org">rafaelw@chromium.org</a>&gt;</dd>
    <dd class="vcard"><span class="fn">Tony Ross</span>, <span class="org">Microsoft</span>, &lt;<a class="email" href="mailto:tross@microsoft.com">tross@microsoft.com</a>&gt;</dd>
</dl>

<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>

<hr>

<h2 id="abstract">Abstract</h2>

<p>This specification describes a method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents.</p>

<h2 id="status">Status of This Document</h2>

<p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports index</a> at http://www.w3.org/TR/.</em></p>

<p>This document was published by the <a href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a> as a First Public Working Draft. If you wish to make comments regarding this document, please send them to <a href="mailto:public-webapps@w3.org">public-webapps@w3.org</a> (<a href="mailto:public-webapps-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-webapps/">archives</a>). All feedback is welcome.</p><p>Publication as a Working Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p>

<p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="http://www.w3.org/2004/01/pp-impl/42538/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>.</p>

</div>

<section class="toc">
<h2 id="toc">Table of Contents</h2>
<ol>
    <li><a href="#about"><span class="section">1</span> About this Document</a></li>
    <li><a href="#dependencies"><span class="section">2</span> Dependencies</a></li>
    <li><a href="#terminology"><span class="section">3</span> Terminology</a></li>
    <li><a href="#introduction"><span class="section">4</span> Introduction</a></li>
    <li><a href="#definitions"><span class="section">5</span> Definitions</a></li>
    <li><a href="#template-element"><span class="section">6</span> The <code>template</code> element</a></li>
    <li><a href="#parsing"><span class="section">7</span> Parsing HTML Templates</a>
    <ol>
        <li><a href="#stack-of-template-insertion-modes-section"><span class="section">7.1</span> The stack of template insertion modes</a></li>
        <li><a href="#creating-an-element-for-a-token"><span class="section">7.2</span> Creating an element for a token</a></li>
        <li><a href="#appending-to-a-template"><span class="section">7.3</span> Appending to a template</a></li>
        <li><a href="#clearing-the-stack"><span class="section">7.4</span> Clearing the stack back to a given context</a></li>
        <li><a href="#foster-parent-addition"><span class="section">7.5</span> Additions to "foster parenting"</a></li>
        <li><a href="#reset-insertion-mode-addition"><span class="section">7.6</span> Additions to "reset the insertion mode appropriately"</a></li>
        <li><a href="#in-table-scope-addition"><span class="section">7.7</span> Additions to "has an element in table scope"</a></li>
        <li><a href="#in-head-addition"><span class="section">7.8</span> Additions to the "in head" insertion mode</a></li>
        <li><a href="#in-body-addition"><span class="section">7.9</span> Additions to the "in body" insertion mode</a></li>
        <li><a href="#in-table-addition"><span class="section">7.10</span> Additions to the "in table" insertion mode</a></li>
        <li><a href="#in-table-body-addition"><span class="section">7.11</span> Additions to the "in table body" insertion mode</a></li>
        <li><a href="#in-row-addition"><span class="section">7.12</span> Additions to the "in row" insertion mode</a></li>
        <li><a href="#in-cell-addition"><span class="section">7.13</span> Additions to the "in cell" insertion mode</a></li>
        <li><a href="#in-colgroup-addition"><span class="section">7.14</span> Additions to the "in column group" insertion mode</a></li>
        <li><a href="#in-select-addition"><span class="section">7.15</span> Additions to the "in select" insertion mode</a></li>
        <li><a href="#in-frameset-addition"><span class="section">7.16</span> Additions to the "in frameset" insertion mode</a></li>
        <li><a href="#template-contents-insertion-mode"><span class="section">7.17</span> The "template contents" insertion mode</a></li>
    </ol>
    </li>
    <li><a href="#fragment-parsing-additions"><span class="section">8</span> Additions to the steps for parsing HTML fragments</a></li>
    <li><a href="#node-clone-additions"><span class="section">9</span> Additions to the steps to clone a node</a></li>
    <li><a href="#serializing-html-templates"><span class="section">10</span> Serializing HTML Templates</a></li>
    <li><a href="#innerhtml-on-templates"><span class="section">11</span> innerHTML on Templates</a></li>
    <li><a href="#parsing-xhtml-documents"><span class="section">12</span> Additions to Parsing XHTML Documents</a></li>
    <li><a href="#serializing-xhtml-documents"><span class="section">13</span> Additions to Serializing XHTML Documents</a></li>
    <li><a href="#xslt-and-xpath"><span class="section">14</span> Behavior of XSLT and XPath in the presence of the template element</a></li>
    <li><a href="#css-additions"><span class="section">15</span> Additions to the CSS user agent style sheet</a></li>
    <li><a href="#acknowledgements">Acknowledgements</a></li>
</ol>

</section>

<section class="math">

<h2 id="about"><span class="section">1</span> About this Document</h2>

<p>All diagrams, examples, notes, are non-normative, as well as sections explicitly marked as non-normative. Everything else in this specification is normative.</p>

<p>The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in <a href="http://dev.w3.org/2006/xbl2/#refsRFC2119">RFC2119</a>. For readability, these words do not appear in all uppercase letters in this specification.</p>

<p>To help with layering and to avoid circular dependencies between various parts of specification, this document consists of three consecutive narratives:
</p><ol>
    <li>setting up the stage for the specification,</li>
    <li>explaining of the conceptual model and algorithms behind it, and</li>
    <li>expressing this model with DOM interfaces and HTML elements.</li>
</ol>
<p>In a sense, these parts can be viewed as <em>math</em>, which sets up the reasoning environment, <em>physics</em>, which is the theoretical reasoning about the concept, and <em>mechanics</em>, which is the is the practical application of this reasoning.</p>

<p>Any point, at which a conforming UA must make decisions about the state or reaction to the state of the conceptual model, is captured as <a href="http://en.wikipedia.org/wiki/Algorithm">algorithm</a>. The algorithms are defined in terms of processing equivalence. The <dfn id="dfn-processing-equivalence" title="#dfn-processing-equivalence">processing equivalence</dfn> is a constraint imposed on the algorithm implementors, requiring the output of the both UA-implemented and the specified algorithm to be exactly the same for all inputs.</p>

<h2 id="dependencies"><span class="section">2</span> Dependencies</h2>

<p>This document relies on the following specifications:</p>

<ul>
    <li><a href="http://www.w3.org/TR/domcore/">DOM4 (DOM Core)</a></li>
    <li><a href="http://www.w3.org/html/wg/drafts/html/master/">HTML</a></li>
    <li><a href="http://dvcs.w3.org/hg/innerhtml/raw-file/tip/index.html">DOM Parsing and Serialization</a></li>
</ul>

<h2 id="terminology"><span class="section">3</span> Terminology</h2>

<p>The following terms are used throughout the specification:

</p><dl>
<dt>context object</dt>
    <dd>The object on which the method or attribute being discussed was called</dd>
<dt>DOM</dt>
    <dd>The <a href="http://www.w3.org/TR/domcore/">document object model</a></dd>
<dt>document</dt>
    <dd>The Document Object Model's underlying document</dd>
<dt>node</dt>
    <dd>Any DOM object that <a href="http://www.w3.org/TR/domcore/#concept-tree-participate">participates in a tree</a></dd>
<dt>document fragment</dt>
    <dd>A DOM object that implements the <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-documentfragment"><code>DocumentFragment</code></a> interface</dd>
<dt>element</dt>
    <dd>A DOM object that implements the <a href="http://www.w3.org/TR/domcore/#interface-element">Element</a> interface</dd>
<dt>DOM tree</dt>
    <dd>Any <a href="http://www.w3.org/TR/domcore/#trees">tree</a>, composed of DOM objects
</dd></dl>

</section>

<section class="physics">

<h2 id="introduction"><span class="section">4</span> Introduction</h2>

<p><em>This section is non-normative.</em></p>

<p>Modern web pages dynamically alter the contents of their documents (e.g. in response to user interaction or new data arriving from the server). It is common that such web pages are authored to require fragments of HTML which may be used in certain states and may require further modification before use, such as the insertion of values appropriate for the usage context.</p>

<p><a href="http://www.w3.org/html/wg/drafts/html/master/">HTML</a> currently provides no mechanism for the declaration of markup fragments as prototypes, which are serialized and deserialized with the document, but not used until needed. Consequently, authors hide these fragments so that their content is available at runtime but is otherwise ignored by the browser. This is generally done either by authoring the fragment as:</p>

<ul>
    <li>Markup (inline within the document), but setting its style ”display:none”.</li>
    <li>String (e.g. within a &lt;script&gt; block).</li>
</ul>

<p>The former has the primary drawback that the author must take care that the fragment not have side effects, such as loading resources with URLs that are not yet fully composed, while the latter has the primary drawback that it encourages run-time parsing (via innerHTML) of strings which include user-supplied data and thus become XSS attack surfaces. Neither approach has an effective way to declare fragments which contain elements at the top-level that are only allowed to occur as children of specific elements (e.g. &lt;tr&gt; or &lt;td&gt;).</p>

<p>This specification defines the HTML Template element, which allows for the declaration of document fragments which are unused by the document when loaded, but are parsed as HTML and are available at runtime for use by the web page.</p>

<p>The &lt;template&gt; element can be placed anywhere within the &lt;head&gt;, &lt;body&gt;, and &lt;frameset&gt; elements, and its contents can contain any content which could otherwise occur at any location within the &lt;head&gt;, &lt;body&gt;, and &lt;frameset&gt; elements. The content of templates are not a part of the document (they do not display, are not matched by querySelector, etc.) and are inactive (e.g. do not cause resources to load, scripts to run, media to play, etc.).</p>

<h2 id="definitions"><span class="section">5</span> Definitions</h2>

<p>A <dfn id="dfn-template" title="#dfn-template">template</dfn> provides a method for declaring document fragments in <a href="http://www.w3.org/html/wg/drafts/html/master/">HTML</a>. The document fragment that is declared by a <a href="#dfn-template">template</a> is called <dfn id="dfn-template-contents" title="#dfn-template-contents">template contents</dfn>.</p>

<p>A <dfn id="dfn-template-contents-owner" title="#dfn-template-contents-owner">template contents owner</dfn> is a <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-document">document</a> which does not have a <a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#browsing-context">browsing context</a>.</p>

<p>Every <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-document">document</a> has an associated <a href="#dfn-template-contents-owner">template contents owner</a>, which is <dfn id="dfn-template-contents-owner-initialization" title="#dfn-template-contents-owner-initialization">initialized</dfn> in a way that is <a href="#dfn-processing-equivalence">equivalent</a> to processing these steps:</p>

<div class="algorithm">
<dl>
<dt>Input</dt>
    <dd><var>DOCUMENT</var>, the <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-document">document</a></dd>
<dt>Output</dt>
    <dd><var>TEMPLATE CONTENTS OWNER</var>, the <a href="#dfn-template-contents-owner">template contents owner</a></dd>
</dl>
<ol>
    <li>If <var>DOCUMENT</var> does not have a <a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#browsing-context">browsing context</a>, let <var>TEMPLATE CONTENTS OWNER</var> be <var>DOCUMENT</var> and abort these steps.</li>
    <li>Otherwise, let <var>TEMPLATE CONTENTS OWNER</var> be a new <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-document">Document</a> node that does not have a <a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#browsing-context">browsing context</a>.</li>
    <li>If <var>DOCUMENT</var> is an <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#html-document">HTML document</a>, Mark <var>TEMPLATE CONTENTS OWNER</var> as an <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#html-document">HTML document</a>.</li>
</ol>
</div>

<p>The <a href="#dfn-template-contents">template contents</a> <strong>must</strong> be a <a href="http://www.w3.org/TR/domcore/#interface-documentfragment">DocumentFragment</a> whose <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-node-document">node document</a> is a <a href="#dfn-template-contents-owner">template contents owner</a>.</p>

<p>While <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing">parsing</a>, the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> is said to have a <dfn id="dfn-template-element-in-html-scope" title="#dfn-template-element-in-html-scope">template element in html scope</dfn> if it has a <a href="#dfn-template"><code>template</code></a> element <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#has-an-element-in-the-specific-scope">in the specific scope</a> consisting of the following element types:</p>

<ul>
    <li><a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a></li>
</ul>

<p class="note">Parts marked <dfn id="template-contents-case" title="#template-contents-case">template contents case</dfn> in algorithms in the parser section are parts that only occur if there is a <a href="#dfn-template-element-in-html-scope">template element in html scope</a> (the parser is presently parsing <a href="#dfn-template-contents">template contents</a>).</p>

<p class="note">Parts marked <dfn id="fragment-or-template-contents-case" title="#fragment-or-template-contents-case">fragment or template contents case</dfn> in algorithms in the parser section are parts that only occur if the parser was created for the purposes of the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#fragment-case">fragment parsing algorithm</a> <em>or</em> if there is a <a href="#dfn-template-element-in-html-scope">template element in html scope</a> (the parser is presently parsing <a href="#dfn-template-contents">template contents</a>).</p>

</section>

<section class="mechanics">

<h2 id="template-element"><span class="section">6</span> The <code>template</code> element</h2>

<p>The <dfn id="dfn-template-element" title="#dfn-template-element"><code>template</code></dfn> element represents a <a href="#dfn-template">template</a>.</p>

<dl>
<dt>Context</dt>
    <dd>As a descendant of the <a href="http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-head-element">head</a> element.</dd>
    <dd>As a descendant of the <a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element">body</a> element.</dd>
    <dd>As a descendant of the <a href="http://www.w3.org/html/wg/drafts/html/master/obsolete.html#frameset">frameset</a> element.</dd>
<dt>Content Model</dt>
    <dd>Any, except the <a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a> element, the <a href="http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-head-element">head</a> element, the <a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element">body</a> element, or the <a href="http://www.w3.org/html/wg/drafts/html/master/obsolete.html#frameset">frameset</a> element.</dd>
<dt>Content attributes</dt>
    <dd><a href="http://www.w3.org/html/wg/drafts/html/master/dom.html#global-attributes">Global attributes</a></dd>
<dt>DOM Interface</dt>
    <dd>
        <pre><code>
interface <dfn id="api-html-template-element" title="#api-html-template-element">HTMLTemplateElement</dfn> : <a href="http://www.w3.org/html/wg/drafts/html/master/dom.html#htmlelement">HTMLElement</a> {
    readonly attribute <a href="http://www.w3.org/TR/domcore/#interface-documentfragment">DocumentFragment</a> <a href="#api-html-template-element-content">content</a>;
}
        </code></pre>
    </dd>
<dt>Attributes</dt>
    <dd>
        <dl>
            <dt id="api-html-template-element-content"><code>content</code> of type <a href="http://www.w3.org/TR/domcore/#interface-documentfragment"><code>DocumentFragment</code></a>, read-only</dt>
            <dd>Provides access to <a href="#dfn-template-contents">template contents</a></dd>
        </dl>
    </dd>
</dl>

<p>Prior to first access, the <a href="#api-html-template-element-content"><code>content</code></a> property <strong>must</strong> be <dfn id="dfn-template-contents-initialization" title="#dfn-template-contents-initialization">initialized</dfn> in a way that is <a href="#dfn-processing-equivalence">equivalent</a> to processing these steps:</p>

<div class="algorithm">
<dl>
<dt>Input</dt>
    <dd><var>TEMPLATE</var>, the <a href="#dfn-template">template</a></dd>
<dt>Output</dt>
    <dd><var>CONTENTS</var>, the <a href="#dfn-template-contents">template contents</a></dd>
</dl>
<ol>
    <li>Let <var>DOCUMENT</var> be the <a href="#dfn-template-contents-owner">template contents owner</a> of the <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-node-document">node document</a> of the context object.</li>
    <li>Let <var>CONTENTS</var> be a new <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-documentfragment">DocumentFragment</a> object whose <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-node-document">node document</a> is <var>DOCUMENT</var> and associated <a href="http://dom.spec.whatwg.org/#concept-documentfragment-host">host</a> element is <var>TEMPLATE</var>.</li>
</ol>
</div>

<p>When a <a href="#dfn-template">template</a> element's <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-node-document">node document</a> changes, the template element's <a href="#api-html-template-element-content"><code>content</code></a> DocumentFragment <strong>must</strong> be <a href="http://www.w3.org/TR/domcore/#concept-node-adopt">adopted</a> into the new node document's <a href="#dfn-template-contents-owner">template contents owner</a> document.</p>

<p><em>Non-normative note: It is recommended that user agents implementing the template element prevent DOM hierarhcy cycles, including those which contain a reference (graph edge) from template element to the templates document fragment. When such a cycle would be created, it is recommended that the user agent throw a HierarchyRequestError.</em></p>

<h2 id="parsing"><span class="section">7</span> Parsing HTML Templates</h2>

<p>The parsing of <a href="#dfn-template">templates</a> is defined as a set of additions to the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing">HTML parsing algorithm</a>. When parsing, the <a href="#dfn-template-element"><code>template</code></a> element is in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#special">special</a> category.</p>




<h3 id="stack-of-template-insertion-modes-section"><span class="section">7.1</span> The stack of template insertion modes</h3>

<p>Initially, <dfn id="stack-of-template-insertion-modes" title="#stack-of-template-insertion-modes">the stack of template insertion modes</dfn> is empty. The stack grows downwards; the topmost value on the stack is the first one added to the stack, and the bottommost value of the stack is the one most recently added.</p>

<p>The <dfn id="current-template-insertion-mode" title="#current-template-insertion-mode">current template insertion mode</dfn> is the bottommost node in this stack.</p>

<h3 id="creating-an-element-for-a-token"><span class="section">7.2</span> Creating an element for the token</h3>

<p>Whenever the HTML parser is about to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#create-an-element-for-the-token">create an element for the token</a>, if the current node is a <a href="#dfn-template-element"><code>template</code></a> element, the element must be created with its <a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#dom-node-ownerdocument">ownerDocument</a> set to the <a href="#dfn-template-contents-owner">template contents owner</a> of the <a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#dom-node-ownerdocument">ownerDocument</a> of the <a href="#dfn-template-element"><code>template</code></a> element.</p>

<h3 id="appending-to-a-template"><span class="section">7.3</span> Appending to a template</h3>

<p>Whenever the HTML parser is about to append a node to a <a href="#dfn-template-element"><code>template</code></a> element, the node <strong>must</strong> be appended to the <a href="#dfn-template-contents">template contents</a> of the <a href="#dfn-template-element"><code>template</code></a> element instead.</p>

<p class="note">As a result, the HTML parser will never place any nodes as direct children of a <a href="#dfn-template-element"><code>template</code></a> element.</p>

<h3 id="clearing-the-stack"><span class="section">7.4</span> Clearing the stack back to a given context</h3>

<p>When popping elements from the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a>, a conforming UA <strong>must</strong> abort the following procedures when the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> is <a href="#dfn-template-element"><code>template</code></a>:
</p><ol>
    <li><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#clear-the-stack-back-to-a-table-context">Clearing the stack back to a table context</a></li>
    <li><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#clear-the-stack-back-to-a-table-body-context">Clearing the stack back to a table body context</a></li>
    <li><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#clear-the-stack-back-to-a-table-row-context">Clearing the stack back to a table row context</a></li>
</ol>

<h3 id="foster-parent-addition"><span class="section">7.5</span> Additions to "foster parenting"</h3>

<p>When a node is to be <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#foster-parent"><strong>foster parented</strong></a>, the last <a href="#dfn-template-element"><code>template</code></a> element with either no <a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-table-element"><code>table</code></a> element is below it, or a <a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-table-element"><code>table</code></a> element immediately below it, in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> is the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#foster-parent-element"><strong>foster parent element</strong></a> <em>(NOT the template's parent!)</em> if there is such a <a href="#dfn-template-element"><code>template</code></a> element in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a>. Otherwise normal rules for <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#foster-parenting">foster parenting</a> apply.</p>

<p class="note">This prevents the HTML parser from "lifting" content outside of a template when a node is to be <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#foster-parent"><strong>foster parented</strong></a>, aligning template behavior more closely with the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#html-fragment-parsing-algorithm">HTML fragment parsing algorithm</a>.</p>

<h3 id="reset-insertion-mode-addition"><span class="section">7.6</span> Additions to "reset the insertion mode appropriately"</h3>

<p>Just after the step labeled <strong>"Loop"</strong> in the algorithm to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#reset-the-insertion-mode-appropriately">reset the insertion mode appropriately</a>, add the following step:</p>
<ol start="4">
    <li>If <em>node</em> is a <a href="#dfn-template-element"><code>template</code></a> element, then switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to the <a href="#current-template-insertion-mode">current template insertion mode</a> and abort these steps.</li>
</ol>

<p>Modify the step which begins <em>"If node is a head element..."</em> to be:</p>
<ol start="11">
    <li>If <em>node</em> is a <a href="http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-head-element"><code>head</code></a> element <strong>and</strong> <em>node</em> is the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#concept-frag-parse-context"><em>context</em></a> element, then switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">"in body"</a> ("<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">in body</a>"! not "<em><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">in head</a></em>") and abort these steps (<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#fragment-case">fragment case</a>). Otherwise, switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">"in head"</a>, and abort these steps.</li>
</ol>

<p>The following cases which were previously annotated as <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#fragment-case">fragment case</a>, can now be entered during normal parsing (i.e. <em>not</em> only in the fragment case) immediately following encountering a &lt;/template&gt; token, and the annotation should be removed:</p>

<ul>
    <li>Step 4: "If <em>node</em> is a select element..."</li>
    <li>Step 9: "If <em>node</em> is a colgroup element..."</li>
    <li>Step 13: "If <em>node</em> is a frameset element..."</li>
</ul>

<h3 id="in-table-scope-addition"><span class="section">7.7</span> Additions to "has an element in table scope"</h3>

<p>Add the following to the list of element types for the algorithm to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#has-an-element-in-table-scope"><strong>have an element in table scope</strong></a>:</p>
<ul>
    <li><a href="#dfn-template-element"><code>template</code></a> in the <a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#html-namespace-0">HTML namespace</a>
</li></ul>

<h3 id="in-head-addition"><span class="section">7.8</span> Additions to the "in head" insertion mode</h3>

<p>Just before the <strong>A start tag whose tag name is "head"</strong> rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">"in head"</a> insertion mode, add the following rules:</p>
<dl>
<dt>A start tag whose tag name is "template"</dt>
    <dd>Run these steps:
    <ol>
        <li>Insert a marker at the end of the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#list-of-active-formatting-elements">list of active formatting elements</a></li>
        <li><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insert-an-html-element">Insert an HTML element</a> for the token</li>
        <li>Switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="#template-contents-insertion-mode">"template contents"</a></li>
        <li>Push "template contents" onto the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a> so that it is the new <a href="#current-template-insertion-mode">current template insertion mode</a>.</li>
    </ol>
    </dd>
<dt>An end tag whose name is "template"</dt>
    <dd>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> does not <a href="#dfn-template-element-in-html-scope">template element in html scope</a>, then this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a>; ignore the token.</dd>
    <dd>Otherwise, run these steps:
    <ol>
        <li><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#generate-implied-end-tags">Generate implied end tags</a></li>
        <li>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> is not an element with the same tag name as that of the token, then this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a></li>
        <li>Pop elements from the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> until an element with the same tag name as the token has been popped from the stack</li>
        <li><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#clear-the-list-of-active-formatting-elements-up-to-the-last-marker">Clear the list of active formatting elements up to the last marker</a></li>
        <li>Pop the <a href="#current-template-insertion-mode">current template insertion mode</a> off the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>.</li>
        <li><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#reset-the-insertion-mode-appropriately">Reset the insertion mode appropriately</a></li>
    </ol>
    </dd>
</dl>

<h3 id="in-body-addition"><span class="section">7.9</span> Additions to the "in body" insertion mode</h3>

<p>Modify the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">in body</a> insertion mode for encountering a "html" start tag</p>

<dl>
    <dt>A start tag whose tag name is "html"</dt>
    <dd>
        <p><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">Parse error</a>. If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> has a <a href="#dfn-template-element-in-html-scope">template element in html scope</a> then ignore the token (<a href="#template-contents-case">template contents case</a>). Otherwise, for each attribute on the token, check to see if the attribute is already present on the top element of the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a>. If it is not, add the attribute and its corresponding value to that element.</p>
    </dd>
</dl>

<p>Modify the first clause of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">in body</a> insertion mode for encountering a "body" start tag:</p>

<dl>
    <dt>A start tag whose tag name is "body"</dt>
    <dd>
        <p>If the second element on the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> is not a <a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element"><code>body</code></a> element, or, if the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> has only one node on it, or, if the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> has a <a href="#dfn-template-element-in-html-scope">template element in html scope</a> then ignore the token. (<a href="#fragment-or-template-contents-case">fragment or template contents case</a>)</p>
    </dd>
</dl>

<p>Modify the first clause of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">in body</a> insertion mode for encountering a "frameset" start tag:</p>

<dl>
    <dt>A start tag whose tag name is "frameset"</dt>
    <dd>
        <p>If the second element on the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> is not a <a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element"><code>body</code></a> element, or, if the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> has only one node on it then ignore the token. (<a href="#fragment-or-template-contents-case">fragment or template contents case</a>)</p>
    </dd>
</dl>

<p>Modify the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">"in body"</a> insertion mode for encountering an end-of-file token to be:</p>

<dl>
    <dt>An end-of-file token</dt>

    <dd><p>If there is a node in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a>
    that is not either a <code><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-dd-element">dd</a></code> element, a <code><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-dt-element">dt</a></code>
    element, an <code><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-li-element">li</a></code> element, a <code><a href="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-p-element">p</a></code> element, a
    <code><a href="tabular-data.html#the-tbody-element">tbody</a></code> element, a <code><a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-td-element">td</a></code> element, a
    <code><a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-tfoot-element">tfoot</a></code> element, a <code><a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-th-element">th</a></code> element, a
    <code><a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-thead-element">thead</a></code> element, a <code><a href="http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-tr-element">tr</a></code> element, the
    <code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element">body</a></code> element, or the <code><a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element">html</a></code> element, then
    this is a <a href="#parse-error">parse error</a>.</p>

    <p>If the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a> is not empty, reprocess the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="#template-contents-insertion-mode">"template contents"</a> <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a>.</p>

    <p>Otherwise, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stop-parsing">stop parsing</a>.</p></dd>
</dl>

<p>Modify the step 10 of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">in body</a> insertion mode for encountering an <strong>end tag whose tag name is one of "a", "b", "big", "code", "em", "font", "i", "nobr", "s", "small", "strike", "strong", "tt", "u"</strong>:</p>

<dl>
    <dd>
        <p>If the <em>common ancestor</em> node is a table, tbody, tfoot, thead, or tr element, then, foster parent whatever <em>last node</em> ended up being in the previous step, first removing it from its previous parent node if any.</p>

        <p>If the <em>common ancestor</em> is a <code>template</code> element, append whatever <em>last node</em> ended up being in the previous step to the template element's <a href="#api-html-template-element-content"><code>content</code></a> DocumentFragment, first removing it from its previous parent node if any.</p>

        <p>Otherwise, append whatever <em>last node</em> ended up being in the previous step to the <em>common ancestor</em> node, first removing it from its previous parent node if any.</p>
    </dd>
</dl>

<p>Just before the <strong>Any other start tag</strong> rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">"in body"</a> insertion mode, add the following rule:</p>

<dl>
    <dt>A start tag whose tag name is "template"</dt>
    <dt>An end tag whose name is "template"</dt>
        <dd>Process the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">"in head"</a> insertion mode</dd>
</dl>

<h3 id="in-table-addition"><span class="section">7.10</span> Additions to the "in table" insertion mode</h3>

<p>Modify the non-normative <em>Note</em> for the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intable">in table</a> insertion mode for encountering a "table" start tag:</p>

<dl>
    <dt>A start tag whose tag name is "table"</dt>
    <dd>
        <p><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">Parse error</a>. Act as if an end tag token with the tag name "table" had been seen, then, if that token wasn't ignored, reprocess the current token.</p>

        <p class="note">The fake end tag token here can only be ignored in the <a href="#fragment-or-template-contents-case">fragment or template contents case</a>.</p>
    </dd>
</dl>

<p>Modify the first clause of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intable">in table</a> insertion mode for encountering a "table" end tag:</p>

<dl>
    <dt>A end tag whose tag name is "table"</dt>
    <dd>
        <p>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> does not have an <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#has-an-element-in-table-scope">element in table scope</a> with the same tag name as the token, this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a>. Ignore the token. (<a href="#fragment-or-template-contents-case">fragment or template contents case</a>)</p>
    </dd>
</dl>

<p>Just before the <strong>Anything else</strong> rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intable">"in table"</a> insertion mode, add the following rule:</p>

<dl>
    <dt>A start tag whose tag name is "template"</dt>
    <dt>An end tag whose name is "template"</dt>
    <dd>Process the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">"in head"</a> insertion mode</dd>
</dl>

<p class="note">The "<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intbody">in table body</a>" insertion mode is not modified because it defers to "<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intable">in table</a>" for <strong>"Anything else"</strong>. Likewise, the "<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-incaption">in caption</a>" and "<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intd">in cell</a>" insertion modes are not modified because they defer to "<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">in body</a>".</p>

<p>Modify the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intbody">"in table"</a> insertion mode for encountering an end-of-file token to be:</p>

<dl>
    <dt>An end-of-file token</dt>
    <dd><p>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> is the root <a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a> element, then this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a>.</p>

    <p class="note">The <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> can only be the root <code><a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a></code> element in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#fragment-case">fragment case</a>.</p>

    <p>If the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a> is not empty, reprocess the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="#template-contents-insertion-mode">"template contents"</a> <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a>.</p>

    <p>Otherwise, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stop-parsing">stop parsing</a>.</p></dd>
</dl>


<h3 id="in-table-body-addition"><span class="section">7.11</span> Additions to the "in table body" insertion mode</h3>

<p class="note">The following modification only modifies this two cases as "<a href="#fragment-or-template-contents-case">fragment or template contents case</a>"</p>

<p>Modify the first clause of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intbody">in table body</a> insertion mode for encountering a "caption", "col", "colgroup", "tbody", "tfoot", "thead" start tag or a "table" end tag:</p>

<dl>
    <dt>A start tag whose tag name is one of: "caption", "col", "colgroup", "tbody", "tfoot", "thead"</dt>
    <dt>An end tag whose tag name is "table"</dt>
    <dd>
        <p>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> does not <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#has-an-element-in-table-scope">have a <code>tbody</code>, <code>thead</code>, or <code>tfoot</code> element in table scope</a>, this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a>. Ignore the token. (<a href="#fragment-or-template-contents-case">fragment or template contents case</a>)</p>
    </dd>
</dl>

<h3 id="in-row-addition"><span class="section">7.12</span> Additions to the "in row" insertion mode</h3>

<p class="note">The following modifications only modify these two case as "<a href="#fragment-or-template-contents-case">fragment or template contents case</a>"</p>

<p>Modify the first clause of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intr">in row</a> insertion mode for encountering a "tr" end tag:</p>

<dl>
    <dt>A end tag whose tag name is "tr"</dt>
    <dd>
        <p>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> does not have an <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#has-an-element-in-table-scope">element in table scope</a> with the same tag name as the token, this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a>. Ignore the token. (<a href="#fragment-or-template-contents-case">fragment or template contents case</a>)</p>
    </dd>
</dl>

<p>Modify the first clause of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intr">in row</a> insertion mode for encountering a "caption", "col", "colgroup", "tbody", "tfoot", "thead", "tr" start tag or a "table" end tag:</p>

<dl>
    <dt>A start tag whose tag name is one of: "caption", "col", "colgroup", "tbody", "tfoot", "thead", "tr"</dt>
    <dt>An end tag whose tag name is "table"</dt>
    <dd>
        <p>Act as if an end tag with the tag name "tr" had been seen, then, if that token wasn't ignored, reprocess the current token.</p>

        <p>The fake end tag token here can only be ignored in the <a href="#fragment-or-template-contents-case">fragment or template contents case</a>.</p>
    </dd>
</dl>

<h3 id="in-cell-addition"><span class="section">7.13</span> Additions to the "in cell" insertion mode</h3>

<p>Modify the parenthetical comment within the <strong>An end tag whose tag name is one of: "table", "tbody", "tfoot", "thead", "tr"</strong> rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intd">"in cell"</a> insertion mode, to be:</p>

<p>(which can only happen for "tbody", "tfoot" and "thead", when parsing template contents, or in the fragment case)</p>

<h3 id="in-colgroup-addition"><span class="section">7.14</span> Additions to the "in column group" insertion mode</h3>

<p>Modify the first clause of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-incolgroup">"in column group"</a> insertion mode for encountering a "colgroup" end tag to be:</p>

<dl>
    <dt>An end tag whose tag name is "colgroup"</dt>
    <dd>
        <p>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> is the root <a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a> or a <code>template</code> element then this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a>; ignore the token. (<a href="#fragment-or-template-contents-case">fragment or template contents case</a>)</p>
    </dd>
</dl>

<p>Just before the <strong>An end-of-file token</strong> rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-incolgroup">"in column group"</a> insertion mode, add the following rule:</p>

<dl>
    <dt>A start tag whose tag name is "template"</dt>
    <dt>An end tag whose name is "template"</dt>
    <dd>Process the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">"in head"</a> insertion mode</dd>
</dl>

<p>Modify the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-incolgroup">"in column group"</a> insertion mode for encountering an end-of-file token to be:</p>

<dl>
    <dt>An end-of-file token</dt>
    <dd><p>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> is the root <a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a> element, then <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stop-parsing">stop parsing</a>. (<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#fragment-case">fragment case</a>).</p>

    <p>Otherwise, act as if an end tag with the tag name "colgroup" had been seen, and then reprocess the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intable">"in table"</a> <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a>.</p></dd>
</dl>

<h3 id="in-select-addition"><span class="section">7.15</span> Additions to the "in select" insertion mode</h3>

<p>Just before the <strong>Anything else</strong> rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inselect">"in select"</a> insertion mode, add the following rule:</p>

<dl>
    <dt>A start tag whose tag name is "template"</dt>
    <dt>An end tag whose name is "template"</dt>
    <dd>Process the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">"in head"</a> insertion mode</dd>
</dl>

<h3 id="in-frameset-addition"><span class="section">7.16</span> Additions to the "in frameset" insertion mode</h3>

<p>Modify the first clause of the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inframeset">in frameset</a> insertion mode for encountering a "frameset" end tag to be:</p>

<dl>
    <dt>An end tag whose tag name is "frameset"</dt>
    <dd>
        <p>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> is the root <a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a>, or, if the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stack-of-open-elements">stack of open elements</a> has a <a href="#dfn-template-element-in-html-scope">template element in html scope</a> then this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a>; ignore the token. (<a href="#fragment-or-template-contents-case">fragment or template contents case</a>)</p>
    </dd>
</dl>

<p>Modify the rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inframeset">"in frameset"</a> insertion mode for encountering an end-of-file token to be:</p>

<dl>
    <dt>An end-of-file token</dt>
    <dd><p>If the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> is the root <a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a> element, then this is a <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">parse error</a>.</p>

    <p class="note">The <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#current-node">current node</a> can only be the root <code><a href="http://www.w3.org/html/wg/drafts/html/master/the-root-element.html#the-html-element"><code>html</code></a></code> element in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#fragment-case">fragment case</a>.</p>

    <p>If the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a> is not empty, reprocess the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="#template-contents-insertion-mode">"template contents"</a> <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a>.</p>

    <p>Otherwise, <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#stop-parsing">stop parsing</a>.</p></dd>
</dl>

<p>Just before the <strong>Anything else</strong> rule in the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inframeset">"in frameset"</a> insertion mode, add the following rule:</p>

<dl>
    <dt>A start tag whose tag name is "template"</dt>
    <dt>An end tag whose name is "template"</dt>
    <dd>Process the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">"in head"</a> insertion mode</dd>
</dl>

<h3 id="template-contents-insertion-mode"><span class="section">7.17</span> The "template contents" insertion mode</h3>

<p>When the user is to apply the rules for the "template contents" <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a>, the user agent <strong>must</strong> handle the token as follows:</p>

<dl>
    <dt>A character token</dt>
    <dd>Process the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the "<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">in body</a>" <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a>.</dd>

    <dt>A DOCTYPE token</dt>
    <dd><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">Parse error</a>. Ignore the token.</dd>

    <dt>A comment token</dt>
    <dt>A start tag whose name is one of: "link", "script", "style", "meta", template"</dt>
    <dd>Process the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the "<a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">in head</a>" <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a>.</dd>

    <dt>A start tag whose name is "frame"</dt>
    <dd>Pop the <a href="#current-template-insertion-mode">current template insertion mode</a> off the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, push "in frameset" onto the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inframeset">"in frameset"</a> and reprocess the current token</dd>

    <dt>A start tag whose name is "col"</dt>
    <dd>Pop the <a href="#current-template-insertion-mode">current template insertion mode</a> off the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, push "in column group" onto the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-incolgroup">"in column group"</a> and reprocess the current token</dd>

    <dt>A start tag whose name is one of: "caption", "colgroup", "tbody", "tfoot", "thead"</dt>
    <dd>Pop the <a href="#current-template-insertion-mode">current template insertion mode</a> off the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, push "in table" onto the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intable">"in table"</a> and reprocess the current token</dd>

    <dt>A start tag whose name is one of: "tr"</dt>
    <dd>Pop the <a href="#current-template-insertion-mode">current template insertion mode</a> off the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, push "in table body" onto the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intbody">"in table body"</a> and reprocess the current token</dd>

    <dt>A start tag whose name is one of: "td", "th"</dt>
    <dd>Pop the <a href="#current-template-insertion-mode">current template insertion mode</a> off the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, push "in row" onto the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-intr">"in row"</a> and reprocess the current token</dd>

    <dt>A start tag whose tag name is "template"</dt>
    <dt>An end tag whose name is "template"</dt>
    <dd>Process the token <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#using-the-rules-for">using the rules for</a> the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inhead">"in head"</a> insertion mode</dd>

    <dt>Any other start tag</dt>
    <dd>Pop the <a href="#current-template-insertion-mode">current template insertion mode</a> off the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, push "in body" onto the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>, switch the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#insertion-mode">insertion mode</a> to <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parsing-main-inbody">"in body"</a> and reprocess the current token</dd>

    <dt>Any other end tag</dt>
    <dd><a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#parse-error">Parse error</a>. Ignore the token.</dd>

    <dt>An end-of-file token</dt>
    <dd>Act as if an end tag with tag name "template" had been seen, then, if that token wasn't ignored, reprocess the current token.</dd>
</dl>

<h2 id="fragment-parsing-additions"><span class="section">8</span> Additions to the steps for parsing HTML fragments</h2>

<p>Add a sub-step to step 4 (If there is a context element) before sub-step 5 (Reset the parser's insertion mode appropriately):</p>

<dl>
    <dd>
        <p>If the context element is a <code>template</code> element, push "template contents" onto the <a href="#stack-of-template-insertion-modes">stack of template insertion modes</a>.</p>
    </dd>
</dl>

<h2 id="node-clone-additions"><span class="section">9</span> Additions to the steps to clone a node</h2>

<p>The steps for <a href="http://www.w3.org/TR/domcore/#concept-node-clone">cloning a node</a> are defined by the <a href="http://www.w3.org/TR/domcore/">DOM4 specification</a>.</p>

<p>Add a step before step 7 (Return <em>copy</em>):</p>

<dl>
    <dd>
        <p>If the <var>clone children flag</var> is set and <var>node</var> is <code>template</code> element, clone all the children of node's <a href="#api-html-template-element-content">content</a> and append them to <var>copy</var>'s <a href="#api-html-template-element-content">content</a>, with ownerDocument set as <var>node</var>'s <a href="#dfn-template-contents-owner">template content owner</a> and the <var>clone children flag</var> being set.</p>
    </dd>
</dl>


<h2 id="serializing-html-templates"><span class="section">10</span> Serializing HTML Templates</h2>

<p>The serialization of <a href="#dfn-template">templates</a> is defined as the following addition to the <a href="http://www.w3.org/html/wg/drafts/html/master/syntax.html#serializing-html-fragments">Serializing HTML Fragments</a> algorithm.</p>

<p>When running these steps, before step 2 ("For each child node of <em>the node</em>, in tree order, run the following steps"), insert the following step:</p>

<p>If <em>the node</em> is a &lt;template&gt; element, let <em>the node</em> be the <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-documentfragment">DocumentFragment</a> referenced by <em>the node</em>'s <a href="#api-html-template-element-content">content</a> attribute</p>

<h2 id="innerhtml-on-templates"><span class="section">11</span> innerHTML on Templates</h2>

<p>The behavior of innerHTML on <a href="#dfn-template">templates</a> is defined as a modification to the <a href="http://dvcs.w3.org/hg/innerhtml/raw-file/tip/index.html">DOM Parsing and Serialization</a> specification.</p>

<p>When running the steps for setting <a href="http://www.w3.org/TR/2012/WD-DOM-Parsing-20120920/#widl-Element-innerHTML">innerHTML</a>, modify step 2, ("<em>Replace all</em>, with <em>fragment</em> within the <a href="
http://www.w3.org/TR/2012/WD-DOM-Parsing-20120920/#dfn-context-object">context object</a>") to be:</p>

<p>If <a href="
http://www.w3.org/TR/2012/WD-DOM-Parsing-20120920/#dfn-context-object">context object</a> is an HTML Template Element, <em>replace all</em> with <em>fragment</em> within the <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-documentfragment">DocumentFragment</a> referenced by the <em>content object</em>'s <a href="#api-html-template-element-content">content</a> attribute. Otherwise, <em>replace all</em> with <em>fragment</em> within the <a href="
http://www.w3.org/TR/2012/WD-DOM-Parsing-20120920/#dfn-context-object">context object</a>.</p>


<h2 id="parsing-xhtml-documents"><span class="section">12</span> Additions to Parsing XHTML Documents</h2>

<p>The parsing of XHTML documents is defined as the following additions to <a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#parsing-xhtml-documents">Parsing XHTML documents</a>.</p>

<p>When a user agent is contructing a DOM tree corresponding to the input passed to the <a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#xml-parser">XML parser</a>, and a node is about to be appended to a <code>template</code> element, the node must instead be appended to the template element's <a href="#api-html-template-element-content"><code>content</code></a> DocumentFragment. Also, when the user agent creates a node for insertion to the DOM tree, the created node's <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-node-document">node document</a> must be set to that of the element to which it will be appended.</p>

<h2 id="serializing-xhtml-documents"><span class="section">13</span> Additions to Serializing XHTML Documents</h2>

<p>The serialization of XHTML documents is defined as the following additions to <a href="http://www.w3.org/html/wg/drafts/html/master/the-xhtml-syntax.html#serializing-xhtml-fragments">Serializing XHTML documents</a>.</p>

<p>When the algorithm must produce a serialization of a <code>template</code> element, the string returned must be contain a serialization of the child nodes of the template element's <a href="#api-html-template-element-content"><code>content</code></a> DocumentFragment, rather than the <code>template</code> element's children.</p>

<h2 id="xslt-and-xpath"><span class="section">14</span> Behavior of XSLT and XPath in the presence of the template element</h2>

<p><a href="http://www.w3.org/TR/xslt">XSLT</a> processing should to treat <a href="#dfn-template-contents">template contents</a> as descendants of the template element when contained in XHTML input of an XSLT transform and place the descendants of a template element into <a href="#dfn-template-contents">template contents</a> in XSLT output. However, XPath evaluation using the <a href="http://www.w3.org/TR/xpath/">XPath</a> DOM API should not to match on template contents.</p>

<h2 id="css-additions"><span class="section">15</span> Additions to the CSS user agent style sheet</h2>

<p>The <a href="#dfn-template-contents">template contents</a> are hidden implicitly since they are not part of the document. The <a href="#dfn-template">template</a> element itself <strong>must</strong> be hidden by default through the following addition to the user agent style sheet.</p>

<pre class="prettyprint"><code><span class="pln">
</span><span class="lit">@namespace</span><span class="pln"> </span><span class="str">"http://www.w3.org/1999/xhtml"</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">template</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    display </span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

</section>

<h2 id="acknowledgements">Acknowledgements</h2>

<p>The <code>template</code> element was described by <span class="vcard">Ian Hickson</span> in the <a href="http://dev.w3.org/2006/xbl2/#the-template-element">XBL 2.0</a> specification, and this HTML Templates specification borrows most of semantics from there, applying them to the HTML realm.</p>

<p><span class="vcard">Erik Arvidsson</span> and <span class="vcard">Adam Klein</span> worked closely with the editors to help identify requirements and use cases for the templates, producing the <a href="http://code.google.com/p/mdv/">Model-driven Views</a> library, which uses a <code>template</code> element extensively.</p>

<p>The editors would also like to thank <span class="vcard">Adam Barth</span>, <span class="vcard">Henri Sivonen</span>, and <span class="vcard">Tab Atkins</span> for their useful comments and contributions to the specification.</p>


<form style="position: fixed; width: 10em; top: 1em; right: 1em; font-family: Tahoma, sans-serif; font-size: 11px; opacity: 0.8; text-align: right;" action="http://www.w3.org/Bugs/Public/enter_bug.cgi" target="_blank">See a problem? Select text and <input type="submit" accesskey="f" style="font-family: Tahoma, sans-serif; font-size: 10px;" value="file a bug"><input type="hidden" name="comment" value=""><input type="hidden" name="blocked" value="15476"><input type="hidden" name="short_desc" value="[Templates]: "><input type="hidden" name="product" value="WebAppsWG"><input type="hidden" name="component" value="Component Model"> or <a href="https://www.w3.org/Bugs/Public/showdependencytree.cgi?id=15476" target="_blank">view bugs filed</a>.</form></body></html>
